<template>
  <div>
      <h2>{{msg}}</h2>
      <h2>{{msg.split("").reverse().join('')}}</h2>
      <h2>computed:{{reMsg}}</h2>
      <h2>method:{{reMsgF()}}</h2>
      <h2>{{reMsg}}</h2>
      <h2>{{reMsg}}</h2>
      <h2>{{reMsgF()}}</h2>
      <h2>{{reMsgF()}}</h2>
      <input type="text" v-model="msg"/>
  </div>
</template>

<script>
import { computed, ref, watch } from "vue";
export default {
    setup() {
        const msg = ref("Hello Vue");
        const reMsg = computed(() => {
            console.log("computed触发");
            return msg.value.split("").reverse().join('');
        });
        const reMsgF = () => {
            console.log("methods触发");
            return msg.value.split("").reverse().join('');
        };
        watch(msg, (newValue, oldValue) => {
            console.log('旧值是：${oldValue}，新值是：${newValue}');
        });
        return {
            msg,
            reMsg,
            reMsgF,
    };
    }

    
}
</script>

<style>

</style>